<template>
  <div class="home-page">
    <el-row :gutter="12" class="top-row">
      <el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" v-for="(card,i) in topCards" :key="i">
        <el-card shadow="never" class="top-card">
          <div class="tc-head">
            <img class="tc-icon" :src="iconSrc(i, card)"/>
            <div>
              <div class="tc-title">{{ card.title }}</div>
              <div class="tc-desc">{{ card.desc }}</div>
            </div>
          </div>
          <div class="tc-action">
            <el-button type="primary" round class="primary-btn">{{ card.action }}</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="12" class="banner-row">
      <el-col :xs="24" :md="18">
        <el-card shadow="never" class="banner-card">
          <div class="banner-text">
            <div class="banner-title">天启数科</div>
            <div class="banner-sub">官方系统协助，技术安全有保障</div>
          </div>
        </el-card>
        <el-card shadow="never" class="consume-card">
          <div class="section-head">
            <span>近期消费</span>
            <el-link :underline="false" style="color:#888">查看更多</el-link>
          </div>
          <div ref="consumeChart" class="consume-chart"></div>
        </el-card>
        <el-card shadow="never" class="summary-card">
          <div class="section-head">
            <span>报告总览</span>
          </div>
          <el-row :gutter="12" class="sum-row">
            <el-col :xs="24" :sm="12" :md="8">
              <div class="sum-split">
                <div class="split-item sum-red">
                  <div class="sum-title">{{ summary[0].title }}</div>
                  <div class="sum-value">{{ summary[0].value }}</div>
                </div>
                <div class="split-divider"></div>
                <div class="split-item">
                  <div class="sum-title">{{ summary[1].title }}</div>
                  <div class="sum-value">{{ summary[1].value }}</div>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <div class="sum-split">
                <div class="split-item">
                  <div class="sum-title">{{ summary[2].title }}</div>
                  <div class="sum-value">{{ summary[2].value }}</div>
                </div>
                <div class="split-divider"></div>
                <div class="split-item">
                  <div class="sum-title">{{ summary[3].title }}</div>
                  <div class="sum-value">{{ summary[3].value }}</div>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <div class="sum-split">
                <div class="split-item">
                  <div class="sum-title">{{ summary[4].title }}</div>
                  <div class="sum-value">{{ summary[4].value }}</div>
                </div>
                <div class="split-divider"></div>
                <div class="split-item">
                  <div class="sum-title">{{ summary[5].title }}</div>
                  <div class="sum-value">{{ summary[5].value }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="6">
        <el-card shadow="never" class="notice-card">
          <div class="section-head">
            <span>系统公告</span>
            <el-link :underline="false" style="color:#888">查看更多</el-link>
          </div>
          <div class="notice-list">
            <div class="notice-item" v-for="(n,i) in notices" :key="i">
              <img src="@/assets/logo/logo.png" class="notice-icon"/>
              <div class="notice-text">
                <div class="notice-title">{{ n.title }}</div>
                <div class="notice-sub">{{ n.sub }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import * as echarts from 'echarts'





export default {
  name: 'IndexTem',
  data() {
    return {
      topCards: [
        { title: '天启数科', desc: '欢迎您使用！', action: '开始背调' },
        { title: '查询记录', desc: '数据历史记录，按需回看', action: '点击查看' },
        { title: '账户余额', desc: '当前账户：XXX', action: '点击充值' },
        { title: '商务经理', desc: '客服热线：19235644110', action: '24小时服务' }
      ],
      notices: [
        { title: '智慧查询V1介绍', sub: '产品解析 与 功能介绍' },
        { title: '智慧查询V2介绍', sub: '产品解析 与 功能介绍' },
        { title: '智慧查询V3介绍', sub: '产品解析 与 功能介绍' },
        { title: '智慧查询V4介绍', sub: '产品解析 与 功能介绍' }
      ],
      consume: {
        labels: ['今日消费情况', '本周消费情况', '本月消费情况', '近3个月消费情况', '近6个月消费情况'],
        values: [15.2, 22.4, 22.4, 451.34, 451.34]
      },
      summary: [
        { title: '今日授权数', value: 0 },
        { title: '本日总数', value: 0 },
        { title: '本月授权', value: 0 },
        { title: '本月总数', value: 0 },
        { title: '累积授权数', value: 0 },
        { title: '累积总数', value: 0 }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initConsumeChart()
    })
  },
  methods: {
    iconSrc(i, card) {
      if (card && card.title === '查询记录') return require('@/assets/icons/indexTem/查询.png')
      if (card && card.title === '账户余额') return require('@/assets/icons/indexTem/账户余额.png')
      if (card && card.title === '商务经理') return require('@/assets/icons/indexTem/商务经理.png')
      return require('@/assets/logo/logo.png')
    },
    initConsumeChart() {
      const el = this.$refs.consumeChart
      if (!el) return
      this._consumeChart = echarts.init(el)
      const max = Math.max(...this.consume.values)
      const background = Array(this.consume.labels.length).fill(max)
      const labelBox = 6
      const values = this.consume.values
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { var name = (params[0] && (params[0].axisValueLabel || params[0].name)) || ''; var item = params.find(function(p){ return p.seriesIndex === 1 }) || params[params.length - 1]; var val = Number(item.value); return name + '<br/>' + item.marker + ' ￥' + val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } },
        grid: { left: 10, right: labelBox, top: 10, bottom: 10, containLabel: true },
        xAxis: { type: 'value', axisLine: { show: false }, splitLine: { show: false }, max: max },
        yAxis: { type: 'category', data: this.consume.labels, axisTick: { show: false }, axisLine: { show: false } },
        series: [
          {
            type: 'bar',
            data: background,
            barWidth: 8,
            barGap: '-100%',
            silent: true,
            tooltip: { show: false },
            z: 1,
            itemStyle: { color: '#dde2e7' },
            label: {
              show: true,
              position: 'right',
              align: 'right',
              distance: 0,
              offset: [0, -10],
              formatter: function (params) {
                const val = Number(values[params.dataIndex])
                return '{v|￥' + val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '}'
              },
              rich: {
                v: { width: labelBox, align: 'right', color: '#666' }
              }
            }
          },
          {
            type: 'bar',
            data: this.consume.values,
            barWidth: 8,
            label: { show: false },
            z: 3,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#2f7cff' },
                { offset: 1, color: '#4da8ff' }
              ])
            }
          }
        ]
      }
      this._consumeChart.setOption(option)
      window.addEventListener('resize', () => {
        this._consumeChart && this._consumeChart.resize()
      })
    },
  }

}
</script>

<style scoped>
.home-page { padding: 0; }
.tc-head { display:flex; align-items:center; margin-bottom: 8px; }
.tc-icon { width:16px; height:16px; margin-right:10px; border-radius:4px; object-fit:contain; }
.tc-title { font-size:16px; font-weight:600; }
.tc-desc { color:#8c8c8c; font-size:12px; }
.tc-action { text-align:left; }
.primary-btn { width:120px; height:32px; border-radius:16px; background: linear-gradient(90deg,#4da8ff,#2f7cff); color:#fff; border:none; }
/* top cards: force consistent inner height */
.top-card { background:#f5f8ff; border:1px solid #eef3ff; border-radius:12px; overflow:hidden; }
.top-card >>> .el-card__body { height:120px; display:flex; flex-direction:column; justify-content:space-between; background: transparent; }
/* 移除旧的 .banner 容器样式，改为作用于 el-card body（scoped 深度选择器） */
.banner-card { background-color: transparent; }
.banner-card >>> .el-card__body { height:140px; display:flex; align-items:center; justify-content:space-between; padding:20px; border-radius:6px; position: relative; overflow: hidden; }
.banner-card >>> .el-card__body::before { content:''; position:absolute; inset:0; background: url('~@/assets/icons/indexTem/bg2.png') no-repeat center; background-size: cover; z-index:0; pointer-events:none; }
.banner-card >>> .el-card__body .banner-text, .banner-card >>> .el-card__body .banner-icon { position: relative; z-index:1; }
.banner-title { font-size:22px; font-weight:700; color:#2d74ff; }
.banner-sub { margin-top:6px; color:#000; }
.banner-icon { width:60px; height:60px; opacity:.95; border-radius:4px; }
.section-head { display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:10px; }
.consume-card { margin-top:16px; }
  .consume-chart { height: 160px; margin-top: 10px; }
 .notice-list { display:flex; flex-direction:column; }
 .notice-item { display:flex; align-items:center; padding:10px; background:#f5f7fa; border-radius:6px; margin-bottom:8px; }
  .notice-icon { width:28px; height:28px; margin-right:10px; opacity:.9; }
  .notice-title { font-size:14px; }
  .notice-sub { font-size:12px; color:#888; }
  .summary-card { margin-top:16px; }
  .sum-item { background:#fff; border:1px solid #eef3ff; border-radius:6px; padding:14px; text-align:center; }
  .sum-title { color:#666; font-size:12px; }
  .sum-value { font-size:20px; color:#333; margin-top:6px; }
  .sum-red .sum-value { color:#ff4d4f; }
  /* split container */
  .sum-split { display:flex; align-items:center; background:#fff; border:1px solid #eef3ff; border-radius:6px; padding:18px 0; }
  .split-item { flex:1; text-align:center; }
  .split-divider { width:1px; height:40px; background:#eaeef6; }
 .top-row { margin-bottom:16px; padding:8px 0 8px 8px; background: url('~@/assets/icons/indexTem/bg1.png') no-repeat center; background-size: cover; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
 .banner-row { margin-top:16px; }
 </style>